<template>
	<el-col :span="span" :xs="xs" :sm="sm" :md="md">
		<el-form-item :label="label" :label-width="labelWidth">
			<el-date-picker
				v-model="internalValue"
				type="date"
				style="width: 100%"
				placeholder="选择日期">
			</el-date-picker>
		</el-form-item>
	</el-col>
</template>

<script setup lang="ts">
import {ref, watch, PropType} from 'vue'

const props = defineProps({
	label: {type: String, required: true},
	modelValue: {
		type: String as PropType<string | null>,
		default: null
	},
	labelWidth: {type: String, default: '100px'},
	span: {type: Number, default: 6},
	xs: {type: Number, default: 24},
	sm: {type: Number, default: 12},
	md: {type: Number, default: 6}
})

const emit = defineEmits<{
	(e: 'update:modelValue', value: string | null): void
}>()

// 内部响应式值
const internalValue = ref<string | null>(props.modelValue)

// 监听父组件传入的 modelValue
watch(
	() => props.modelValue,
	(val) => {
		internalValue.value = val
	}
)

// 监听内部值变化，向父组件发出更新
watch(internalValue, (val) => {
	if (val !== null) {
		emit('update:modelValue', val)
	}
})
</script>
